<template>
  <div class="main-container">
    <el-header class="header">
      <!-- Header content -->
    </el-header>
    <el-container>
      <el-aside class="sidebar">
        <el-menu router :default-active="$route.path" class="sidebar-menu">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>推荐</span>
            </template>
            <el-menu-item index="/yyguanli/recommend" @click="torecommend">推荐列表</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>促销</span>
            </template>
            <el-menu-item index="/yyguanli/promotion" @click="topromotion">促销列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>美容师</span>
            </template>
            <el-menu-item index="/yyguanli/firstmeirongyuyue" @click="tofmr">高级美容师</el-menu-item>
            <el-menu-item index="/yyguanli/secondmeirongyuyue" @click="tosmr">中级美容师</el-menu-item>
            <el-menu-item index="/yyguanli/thirdmeirongyuyue" @click="totmr">初级美容师</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>美发师</span>
            </template>
            <el-menu-item index="/yyguanli/firstmeifayuyue" @click="tofmf">高级美发师</el-menu-item>
            <el-menu-item index="/yyguanli/secondmeifayuyue" @click="tosmf">中级美发师</el-menu-item>
            <el-menu-item index="/yyguanli/thirdmeifayueyue" @click="totmf">初级美发师</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>预约状态查看</span>
            </template>
            <!-- SubscribeInfo.vue -->
            <el-menu-item index="/yyguanli/subscribeinfo" @click="tosub">预约状态查看</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="content-area">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'AppointmentSystem',
  methods: {
    tofmr() {
      this.$router.push('/yyguanli/firstmeirongyuyue');
    },
    tosmr() {
      this.$router.push('/yyguanli/secondmeirongyuyue');
    },
    totmr(){
      this.$router.push('/yyguanli/thirdmeirongyuyue');
    },
    tofmf() {
      this.$router.push('/yyguanli/firstmeifayuyue');
    },
    tosmf() {
      this.$router.push('/yyguanli/secondmeifayuyue');
    },
    tosub() {
      this.$router.push('/yyguanli/subscribeinfo');
    },
    totmf() {
      this.$router.push('/yyguanli/thirdmeifayuyue');
    },
    torecommend() {
      this.$router.push('/yyguanli/recommend');
    },
    topromotion() {
      this.$router.push('/yyguanli/promotion');
    }
  }
};
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #3a8ee6;
  color: #fff;

  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.sidebar {
  background-color: #304156;
  overflow-y: auto;
}

.sidebar-menu {
  border-right: none;
  height: 100%; /* Use full height */
  padding: 15px 0; /* Padding at the top and bottom */
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #409EFF;
  color: #fff;
}

.sidebar-menu .el-menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar-menu .el-menu-item > i {
  margin-right: 10px;
}

.sidebar-menu .el-menu-item > span {
  flex-grow: 1; /* Allow text to take up available space */
  text-align: left;
}

.content-area {
  background-color: #f5f7fa;
  padding: 30px;
}

/* Optional: Responsive Design */
@media (max-width: 768px) {
  .sidebar {
    display: none; /* Hide sidebar on small devices */
  }

  .content-area {
    margin: 0; /* Remove padding when sidebar is hidden */
  }
}
</style>
